<template>
  <div class="study main-contianer2">
    <div class="left-list">
      <LeftTreeList :list="list" :tree-props="treeProps" @viewNode="viewNode" />
    </div>
    <div class="right-main">
      <ul v-if="tableData.catalogName">
        <li class="item flex-row" v-for="(item, index) of tableData.studyProgressStudyVo.studyDetailList" :key="index">
          <div class="left">
            <div class="index">{{index+1}}</div>
            <img class="img" :src="item.headImgUrl" />
            <div class="text">
              <p>{{item.studentName}} [{{tableData.studyProgressStudyVo.className}}]</p>
              <p>{{item.duration}}</p>
            </div>
          </div>
          <div class="dianzan">{{item.likeNum}}</div>
        </li>
      </ul>
      <div v-else>
        请选择章节
      </div>
    </div>
  </div>
</template>

<script>
import LeftTreeList from './LeftTreeList'
import { studyIndex } from '@/api/student/lesson/study'
import { studyList } from '@/api/teacher/lesson/study'

export default {
  data () {
    return {
      list: [],
      tableData: {},
      treeProps: {
        children: 'childrens',
        label: 'chapterName'
      }
    }
  },
  methods: {
    async studyIndex () {
      const res = await studyIndex()
      this.list = res.data.lessonList
    },
    async viewNode (data) {
      const res = await studyList({
        resourceLessonChapterId: data.chapterId
      })
      if (res.code === '200') {
        this.tableData = res.data
      } else {
        this.$message.error(res.message)
      }
    }
  },
  components: {
    LeftTreeList
  },
  mounted () {
    this.studyIndex()
  }
}
</script>

<style scoped lang="scss">
  .study {
    .left-list {
      width: 452px;
      height: 100%;
    }
    .right-main {
      width: 728px;
      height: 100%;
      background: #fff;
      border: 1px solid rgba(229, 229, 229, 1);
      border-radius: 5px;
      overflow-y: scroll;
      .item {
        width: 100%;

      }
    }
  }
</style>
